<div [ngClass]="{'dark-theme': isDarkTheme | async}" class="torrent-table-container">
    <!-- <button (click)="getTorrentData()">Get Torrents</button> -->

    <mat-spinner diameter=50 *ngIf="isLoading()"></mat-spinner>
    <p id="loading_p" *ngIf="isLoading()">Loading...</p>

    <app-bulk-update-torrents (onChange)="handleBulkEditChange($event)" *ngIf="!isLoading() && !isTorrentsEmpty()"></app-bulk-update-torrents>

    <!-- Handle context menu -->
    <p-contextMenu #cm [model]="contextMenuItems"></p-contextMenu>

    <p-table *ngIf="!isLoading() && !isTorrentsEmpty()" styleClass="p-datatable-sm mat-elevation-z1"
      [columns]="displayedColumns"
      [value]="filteredTorrentData"
      dataKey="hash"

      [scrollable]="true"
      scrollHeight="73vh"
      [rows]="userPref.web_ui_options?.torrent_table?.default_items_per_page"

      [virtualRowHeight]="50"
      [virtualScroll]="true"

      [reorderableColumns]="true"

      [contextMenu]="cm"
      [(contextMenuSelection)]="contextMenuSelectedTorrent"

      (onColReorder)="handleColumnReorder($event)"
      >

      <!-- TABLE HEADER -->
      <ng-template pTemplate="header">
        <tr>
          <th *ngFor="let col of displayedColumns" [class]="getClassNameForColumns(col)" pReorderableColumn [pSortableColumn]="displayedColumnsMapping[col]">
            <div style="display: flex;" [ngSwitch]="col">
              <!-- Checkbox for selecting ALL torrents -->
              <div *ngSwitchCase="'select'">
                <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
                  [checked]="selection.hasValue() && isAllSelected()"
                  [indeterminate]="selection.hasValue() && !isAllSelected()" [style]="{margin: '5px 15px'}">
                </mat-checkbox>
              </div>

              <div *ngSwitchDefault>{{col}}</div>

              <p-sortIcon *ngIf="!['select', 'Actions'].includes(col)" [field]="displayedColumnsMapping[col]"></p-sortIcon>
            </div>
          </th>
        </tr>
      </ng-template>

      <!-- TABLE ROWS -->
      <ng-template pTemplate="body" let-torrent let-columns="columns">
        <tr class="torrent-table-row"
            [ngClass]="{selected: isSelected(torrent)}"

            (click)="handleTorrentSelected(torrent)"
            (contextmenu)="handleTorrentSelected(torrent)"

            [pContextMenuRow]="torrent"
            >
          <td *ngFor="let col of columns" [class]="getClassNameForColumns(col)">
            <div [ngSwitch]="col">
              <div *ngSwitchCase="'select'">
                <mat-checkbox color="primary" (click)="$event.stopPropagation()"
                          (change)="$event ? handleTorrentSelected(torrent) : null"
                          [checked]="selection.isSelected(torrent)" [style]="{margin: '5px 15px'}">
                </mat-checkbox>
              </div>

              <div *ngSwitchCase="'Actions'">
                <button color="warn" mat-icon-button matTooltip="Delete Torrent" matTooltipPosition="below" (click)="openDeleteTorrentDialog($event, [torrent])">
                  <mat-icon>delete</mat-icon>
                </button>

                <button *ngIf="!isTorrentPaused(torrent)" mat-icon-button matTooltip="Pause Torrent" color="accent" matTooltipPosition="below"
                (click)="$event.stopPropagation();pauseTorrentsBulk([torrent])">
                    <mat-icon>pause</mat-icon>
                </button>

                <button *ngIf="isTorrentPaused(torrent)" mat-icon-button matTooltip="Resume Torrent" color="primary" matTooltipPosition="below"
                (click)="$event.stopPropagation();resumeTorrentsBulk([torrent])">
                    <mat-icon>play_arrow</mat-icon>
                </button>

                <button color="primary" mat-icon-button matTooltip="More Info" matTooltipPosition="right" (click)="openInfoTorrentDialog($event, torrent)">
                    <mat-icon>info</mat-icon>
                </button>
              </div>

              <div *ngSwitchCase="'Progress'">
                <p-progressBar class="custom_progress_bar {{torrent.progress > 0.5 ? 'white_label' : ''}}"
                  [value]="(torrent.progress * 100).toFixed(2)">
                </p-progressBar>
              </div>

              <div *ngSwitchCase="'Size'">
                {{getFileSizeString(torrent.size)}}
              </div>

              <div *ngSwitchCase="'ETA'">
                {{getTorrentETAString(torrent)}}
              </div>

              <div *ngSwitchCase="'Uploaded'">
                {{getFileSizeString(torrent.uploaded)}}
              </div>

              <div *ngSwitchCase="'Ratio'">
                {{getTorrentRatioString(torrent)}}
              </div>

              <div *ngSwitchCase="'Down Speed'">
                {{getFileSizeString(torrent.dlspeed)}}/s
              </div>

              <div *ngSwitchCase="'Up Speed'">
                {{getFileSizeString(torrent.upspeed)}}/s
              </div>

              <div *ngSwitchCase="'Completed On'">
                {{getCompletedOnString(torrent.completion_on)}}
              </div>

              <div *ngSwitchCase="'Added On'">
                {{getCompletedOnString(torrent.added_on)}}
              </div>

              <div *ngSwitchCase="'Last Activity'">
                {{getCompletedOnString(torrent.last_activity)}}
              </div>

              <div *ngSwitchCase="'Status'">
                <p-tag
                  *ngIf="torrent.force_start"
                  value="[F]"
                  styleClass="torrent-table-status info"
                  [style]="{marginRight: '5px'}"
                  >

                </p-tag>

                <p-tag
                  [value]="getStatusString(torrent.state)"
                  [styleClass]="getClassForStatus(torrent)"
                  >
                </p-tag>
              </div>

              <div *ngSwitchDefault>{{torrent[displayedColumnsMapping[col]]}}</div>
            </div>
          </td>
        </tr>
      </ng-template>
    </p-table>

    <div *ngIf="isTorrentsEmpty()">
      <p> No torrents found. Try adding one by clicking Upload at the top-right. </p>
    </div>
</div>

